<template>
	<view class="content">
		<form @submit="change">
			<view class="list">
				<view class="list-title">修改信息</view>
				<view class="list-item">用户名： <input name="user" v-model= "name" /></view>
				<view class="list-item">预约日期： <picker @change="yydate" mode="date">
						<button size="mini">{{yyrq}}</button>
					</picker>
				</view>
				<view class="list-item">预约时间： <picker mode = "multiSelector" :range="sj" @change="yytime" >
						<button size="mini"> {{yysj}} </button>
					</picker>
				</view>
				<view class="list-item">选择理发师：<picker mode="selector" style="padding:0px;margin:0px;" range-key="lable" :range="lfs"
					 @change="lfsselect">
						<view class="xiala">{{xzlfs}}
							<image src="@/static/icon/xl.png"></image>
						</view>
					</picker>
				</view>
				<view class="list-item">选择项目：<picker mode="selector" style="padding:0px;margin:0px;" range-key="lable" :range="xm"
					 @change="xmselect">
						<view class="xiala">{{xzxm}}
							<image src="@/static/icon/xl.png"></image>
						</view>
					</picker>
				</view>
				<view class="list-item">注意事项：<input name="notes" v-model="notes"/></view>
				<button style="width:400upx; background-color:#0055ff; margin-top: 20rpx; color:white;" form-type="submit">一键修改</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sj: [
					['09时','10时','11时','12时','13时','14时','15时','16时','17时','18时','19时','20时'],
					['00分','15分','30分','45分']
				],
				sjIndex:[0,0],
				xzlfs: '选择理发师',
				xzxm: '选择项目',
				lfs: [{
					lable:'二毛',
					value:'二毛'
				},
				{
					lable:'燕子',
					value:'燕子'
				}], //年龄
				xm: [{
					lable: '染发',
					value: '染发'
				}, {
					lable: '烫发',
					value: '烫发'
				}, {
					lable: '理发',
					value: '理发'
				}, {
					lable: '护发',
					value: '护发'
				},{
					lable: '洗发',
					value: '洗发'
				},{
					lable: '刘海',
					value: '刘海'
				}],
				yysj: '选择时间',
				yyrq: '选择日期',
				name:'',
				notes:'',
				senddata: [] ,//存放最终的表单数据
				userid: "",
			}
		},
		onLoad(option) {
			var userid = JSON.parse(option.data)
			this.userid = userid;
			//console.log(userid);
			uniCloud.callFunction({
				name: 'record_readone',
				data:{
					userid
				},
				success: (res) => {
					//console.log(res.result[0].user);
					let name = res.result[0].user;
					this.name = name;
					let notes = res.result[0].notes;
					this.notes = notes;
					let lfs = res.result[0].lfs;
					this.xzlfs = lfs;
					let xm = res.result[0].xm;
					this.xzxm = xm;
					let yyrq = res.result[0].yyrq;
					this.yyrq = yyrq;
					let yysj = res.result[0].yysj;
					this.yysj = yysj;
				},
				fail: (err) => {
					console.log(err);
				},
				complete: (c) => {
					//console.log(c)
				}
			})
		},
		methods: {
			lfsselect: function(e) {
				this.xzlfs = this.lfs[e.detail.value].value
			},
			xmselect: function(e) {
				this.xzxm = this.xm[e.detail.value].value
			},
			yydate: function(e) {
				console.log(e.detail.value);
				this.yyrq = e.detail.value;
			},
			yytime: function(e) {
				var hh = this.sj[0][e.detail.value[0]];
				var mm = this.sj[1][e.detail.value[1]];
				hh = hh.substring(0, hh.length - 1);
				mm = mm.substring(0, mm.length - 1);
				this.yysj = hh +':'+ mm
			},
			change: function(e) {
				this.senddata = [];
				var obj = e.detail.value;
				for (let key in obj) {
					this.senddata[key] = obj[key];
				}
				this.senddata['lfs'] = this.xzlfs; //选择的理发师
				this.senddata['xm'] = this.xzxm; //选择的项目
				this.senddata['yyrq'] = this.yyrq; //预约日期
				this.senddata['yysj'] = this.yysj; //预约时间
				for (let nkey in this.senddata) {
					//组成json
					this.senddata.push("{" + "'" + nkey+ "'" + ":'" + this.senddata[nkey] + "'}");
				}
				if (this.senddata['user'] == "" ) {
					uni.showToast({
						title: '用户名不能为空',
						icon: 'none'
					})
				} else {
					//console.log(this.senddata);
					var outstr = JSON.stringify(this.senddata);
					var that = this;
					//console.log(that.userid);
					outstr = outstr.replace(/"/g,'')
					outstr = outstr.replace(/'/g,'"')
					//console.log(outstr);
					var confirmd = this.senddata;
					uni.showModal({
						title: '确定无误后点击确定',
						content: '用户名：'+confirmd['user']+'\r\n预约日期：'+confirmd['yyrq']+'\r\n预约时间：'+confirmd['yysj']+'\r\n理发师 ：'+confirmd['lfs']+'\r\n所选项目：'+confirmd['xm'] +'\r\n注意事项：'+confirmd['notes'],
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.showLoading({
								    title: "处理中..."
								});			
								uniCloud.callFunction({
								    name: 'record_upd', 
								    data: {
										id:that.userid,
										data:outstr
									}, 
								    success: (res) => {
										console.log(res.result);
										uni.showToast({
											title: res.result.msg,
											//icon: 'none'
										})
										that.$util.navigateTo('../data/data');
								    },
								    fail: (err) => {
										console.log(err);
										uni.showToast({
											title: '修改失败，请稍后重试',
											icon: 'none'
										})
									},
								    complete: (c) => {
										//console.log(c)
								        //uni.hideLoading();
								    }
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background: #ebebeb;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 50upx;
	}

	.list {
		display: flex;
		flex-direction: column;
		width: 680upx;
		margin: auto;
		margin-top: 20upx;
		background: #ffffff;
		border-radius: 20upx;
		padding-bottom: 20upx;
	}

	.list-title {
		width: 580upx;
		padding: 20upx;
		display: flex;
		font-size: 40upx;
		font-weight: bold;
		border-bottom: #f0f0f0 1upx solid;
		margin: auto;
		margin-bottom: 20upx;

	}

	.list-item {
		width: 580upx;
		padding: 20upx;
		display: flex;
		margin: auto;
		font-size: 30upx;
		align-items: center;
	}

	.list-item input {
		background: #f0f0f0;
		border-radius: 10upx;
		padding-left: 20upx;
		padding-right: 20upx;
		width: 300upx;
		height: 60upx;
		color: #999999;
		font-size: 30upx;

	}

	.xiala {
		display: flex;
		background: #f0f0f0;
		padding: 10upx;
		border-radius: 10upx;
		color: #999999;
		font-size: 30upx;

	}

	.xiala image {
		display: flex;
		padding-top: 5upx;
		width: 30upx;
		height: 30upx;
		margin-left: 10upx;

	}
</style>